<template>
  <el-form-item :label="translate('公司编码')" prop="BranchNo">
    <el-input v-model="form.BranchNo" />
  </el-form-item>
  <el-form-item :label="translate('门店名称')" prop="BranchName">
    <el-input v-model="form.BranchName" />
  </el-form-item>
  <el-form-item :label="translate('门店类型')" prop="category">
    <el-select v-model="form.BranchType" :placeholder="translate('请选择')">
      <el-option
        v-for="item in BranchTypeOption"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item :label="translate('门店电话')" prop="manager">
    <el-input v-model="form.BranchTel" />
  </el-form-item>
  <el-form-item :label="translate('门店状态')">
    <el-select v-model="form.BranchStatus" :placeholder="translate('请选择')">
      <el-option
        v-for="item in BranchStatusOption"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item :label="translate('门店地址')">
    <el-input v-model="form.BranchAddress" />
  </el-form-item>
  <el-form-item :label="translate('联系电话')" prop="ContractPhone">
    <el-input v-model="form.ContractPhone" />
  </el-form-item>
  <el-form-item :label="translate('联系人')" prop="ContractName">
    <el-input v-model="form.ContractName" />
  </el-form-item>
  <el-form-item :label="translate('联系邮箱')">
    <el-input v-model="form.ContractEmail" />
  </el-form-item>
  <el-form-item :label="translate('有效日期')">
    <el-date-picker
      v-model="form.SSValidity"
      :placeholder="translate('选择日期')"
      type="date"
    />
  </el-form-item>
  <el-form-item :label="translate('备注')">
    <el-input v-model="form.Remark" />
  </el-form-item>
  <el-form-item :label="translate('启用')" prop="Enabled">
    <el-switch v-model="form.Enabled" active-value="1" inactive-value="0" />
  </el-form-item>
  <el-form-item :label="translate('图片')">
    <ImgUpload
      action="/CSLogoImage/CSLogoUpload?code=branch"
      :image-url="form.LogoURL"
      @success="uploadSuccess"
    />
  </el-form-item>
</template>
<script>
  import ImgUpload from '@/views/components/imgUpload/index.vue'
  import { translate } from '@/i18n'
  export default {
    name: 'Detail',
    components: { ImgUpload },
    props: {
      branchdetail: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    emits: [],
    data() {
      return {
        form: this.branchdetail,
        BranchTypeOption: [
          {
            label: translate('直营'),
            value: 0,
          },
          {
            label: translate('加盟'),
            value: 1,
          },
        ],
        BranchStatusOption: [
          {
            label: translate('无效'),
            value: 0,
          },
          {
            label: translate('正常'),
            value: 1,
          },
        ],
      }
    },
    watch: {
      branchdetail(val) {
        this.form = val
      },
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      uploadSuccess(data) {
        console.log(data)
        this.form.LogoURL = data
      },
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep .el-form {
    display: flex;
    flex-flow: wrap;
    justify-content: left;
  }
  ::v-deep .el-form .el-input {
    width: 234px !important;
  }
  ::v-deep .el-form-item {
    width: 380px;
  }
  ::v-deep input[type='number']::-webkit-inner-spin-button,
  ::v-deep input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
</style>
